<template>
  <div class="role-dialog">
    <el-dialog
      :title="titleFlag ? '修改角色' : '添加角色'"
      :visible.sync="show"
      :before-close="close"
      width="75%"
      center
    >
      <el-form :model="addForm" ref="addForm" label-width="100px">
        <el-form-item label="角色分组：">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="模块：">
          {{checkSubArr}}
          <div class="role" v-for="item in menuList" :key="item.id">
            <el-checkbox
              :value="!!item.checked"
              @change="checkAllChange($event, item)"
              >{{item.name}}</el-checkbox
            >
            <el-checkbox-group
              v-model="checkSubArr"
              @change="checkSubChange($event, item)"
            >
              <el-checkbox v-for="sub in item.children" 
              :label="sub.id"
              :key="sub.id">{{
                sub.name
              }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from "../../api/user";
export default {
  props: {
    titleFlag: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: false,
    },
    updateData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      checkSubArr: [], // 选择权限id
      menuList: [],
      addForm: {
        id: 0, // 0-添加 大于0修改
        name: "",
        menus: [],
      },
    };
  },
  created() {
    this.getRoleList();
  },
  mounted() {},
  methods: {
    checkAllChange (bool, data) {
     let subArr =  data.children.map(item => item.id)
      data.checked = bool
      if (bool) {
        if (data.children) {
          this.checkSubArr = [...new Set(this.checkSubArr.concat(subArr))]
        }
      } else {
          this.checkSubArr = this.checkSubArr.filter(item => !subArr.includes(item))
      }
        console.log('all=',bool, data, this.checkSubArr)

    },
    checkSubChange (arr, data) {
        console.log('sub=',arr, data)
        data.checked = data.children.filter(item => arr.includes(item.id)).length === data.children.length
    },
    async getRoleList() {
      const { data } = await http.getMenuList({ roleid: this.addForm.id });
      this.menuList = data.list;
    },
    close() {
      this.$emit("close", false);
    },
    async addRole() {
      console.log("需要更新的数据", this.addForm);
      // 添加角色menus列表
      this.addForm.menus = this.checkSubArr.map(item => { return { id: item}})
      let msg = !this.addForm.id ? "添加成功" : "修改成功";
      const { errCode } = await http.addAdminRole(this.addForm);
      if (errCode === 10000) {
        this.$message.success(msg);
        // 关闭弹出层 渲染角色列表
        this.$emit("close", false, undefined, 1);
        // 表单重置
        this.$refs.addForm.resetFields();
      }
    },
  },
  watch: {
    async updateData(newVal) {
      if (newVal) {
        this.addForm = newVal;
        // 根据当前编辑行的id，更新模块权限列表
        await this.getRoleList();
        // 存放已经选择的模块id
       let list = [];
       // 变量已选项
        this.menuList.forEach((item) => {
          // 拿到已选项
          let arr = item.children.map(val=> {
            if (val.checked) return val.id
          })
          // 更新子菜单-全选
          this.checkSubChange(arr, item)
          // push已选项list
          arr.forEach(id=> id && list.push(id))
        });
        this.checkSubArr = list;   
        console.log('已有模块权限', this.checkSubArr)   
        }
    },
  },
};
</script>

<style lang="less" scoped>
.role {
  padding-top: 8px;
  .el-checkbox-group {
    padding:8px 15px 0;
  }
}
</style>